<template>
  <q-page padding>
    <q-splitter v-model="splitterModel" unit="px">
      <template v-slot:before>
        <div class="q-gutter-sm">
          <q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="line" label="Line" />
          <q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="rectangle"
            label="Rectangle" />
        </div>
      </template>

      <template v-slot:after>
        <div class="q-pa-md">
          <div class="text-h4 q-mb-md">After</div>
          <div v-for="n in 20" :key="n" class="q-my-md">{{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing
            elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima
            assumenda consectetur culpa fuga nulla ullam. In, libero.</div>
        </div>
      </template>

    </q-splitter>
  </q-page>
</template>


<script setup>
import { ref } from 'vue'

const splitterModel= ref(150) // start at 50%
const shape = ref('line')
</script>